import React, { useEffect, useState } from 'react'
import styles from './bottomtabbar.module.css';
import icon_tab_home_on from '@/assets/icon_tab_home_on.png';
import icon_tab_earn_on from '@/assets/icon_tab_earn_on.png';
import icon_tab_me_on from '@/assets/icon_tab_me_on.png';

import icon_tab_home_off from '@/assets/icon_tab_home_off.png';
import icon_tab_earn_off from '@/assets/icon_tab_earn_off.png';
import icon_tab_me_off from '@/assets/icon_tab_me_off.png';

import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

/**
 * 
 * @param {*} page home/earn/me
 * @returns 
 */
function BottomTabBar({ page = 'home' }) {

    //导航
    const history = useHistory()

    // 图标
    const [homeIcon, setHomeIcon] = useState(icon_tab_home_off)
    const [homeColor, setHomeColor] = useState(styles.bottomTabBarTextColorForUnSelect)

    // 图标
    const [earnIcon, setEarnIcon] = useState(icon_tab_earn_off)
    const [earnColor, setEarnColor] = useState(styles.bottomTabBarTextColorForUnSelect)

    // 图标
    const [meIcon, setMeIcon] = useState(icon_tab_me_off)
    const [meColor, setMeColor] = useState(styles.bottomTabBarTextColorForUnSelect)

    //启动初始化
    useEffect(() => {
        let pageFormat = page.toLowerCase();
        if (pageFormat === 'home') {
            setHomeIcon(icon_tab_home_on)
            setEarnIcon(icon_tab_earn_off)
            setMeIcon(icon_tab_me_off)

            setHomeColor(styles.bottomTabBarTextColorForSelected)
            setEarnColor(styles.bottomTabBarTextColorForUnSelect)
            setMeColor(styles.bottomTabBarTextColorForUnSelect)

        } else if (pageFormat === 'earn') {
            setHomeIcon(icon_tab_home_off)
            setEarnIcon(icon_tab_earn_on)
            setMeIcon(icon_tab_me_off)

            setHomeColor(styles.bottomTabBarTextColorForUnSelect)
            setEarnColor(styles.bottomTabBarTextColorForSelected)
            setMeColor(styles.bottomTabBarTextColorForUnSelect)

        } else if (pageFormat === 'me') {
            setHomeIcon(icon_tab_home_off)
            setEarnIcon(icon_tab_home_off)
            setMeIcon(icon_tab_me_on)

            setHomeColor(styles.bottomTabBarTextColorForUnSelect)
            setEarnColor(styles.bottomTabBarTextColorForUnSelect)
            setMeColor(styles.bottomTabBarTextColorForSelected)
        }

    }, [])

    // 点击 home
    const onHandleTabBarHome = () => {
        history.replace('/home');
    }

    // 点击 earn
    const onHandleTabBarEarn = () => {
        history.replace('/earn');
    }

    // 点击 me
    const onHandleTabBarMe = () => {
        history.replace('/me');
    }

    return (
        <div className={styles.bottomTabBarContainer}>
            <div className={styles.bottomTabBarRoot}>
                <div className={styles.bottomTabBarColumn} onClick={onHandleTabBarHome}>
                    <img className={styles.bottomTabBarImage} alt="" src={homeIcon} />
                    <div className={`${styles.bottomTabBarTitle} ${homeColor}`}>Wallet</div>
                </div>

                {/* Receive */}
                <div className={styles.bottomTabBarColumn} onClick={onHandleTabBarEarn}>
                    <img className={styles.bottomTabBarImage} alt="" src={earnIcon} />
                    <div className={`${styles.bottomTabBarTitle} ${earnColor}`}>Earn</div>
                </div>

                {/* Earn */}
                <div className={styles.bottomTabBarColumn} onClick={onHandleTabBarMe}>
                    <img className={styles.bottomTabBarImage} alt="" src={meIcon} />
                    <div className={`${styles.bottomTabBarTitle} ${meColor}`}>My</div>
                </div>
            </div >
        </div>
    )
}

export default BottomTabBar